<template>
	<view class="contain" v-if="isOpen">
		<!-- 一级大类 -->
		<view class="first">
			<u-tabs :list="firstList.data" @click="firstClick" 
			:activeStyle="{'color':'#3C9CFF','fontSize':'34rpx','fontWeight':'600'}" 
			:inactiveStyle="{'color':'#000','fontSize':'28rpx'}"
			:itemStyle="{'width':'180rpx','height':'80rpx'}"></u-tabs>
		</view>
		<!-- 二级分类 -->
		<view class="first">
			<u-tabs :list="secondList.data" @click="secondClick" 
			:activeStyle="{'color':'#0077af','fontSize':'34rpx','fontWeight':'600'}" 
			:inactiveStyle="{'color':'#ccc','fontSize':'28rpx'}"
			lineHeight="0"
			:itemStyle="{'width':'180rpx','height':'80rpx'}"></u-tabs>
		</view>
		<!-- 日期 -->
		<view class="first" style="border-bottom:0px;">
			<u-tabs :list="weekList.data" @click="weekClick" :scrollable="false" 
			:activeStyle="{'color':'#ff3535','fontSize':'28rpx','fontWeight':'600'}" 
			:inactiveStyle="{'color':'#ccc','fontSize':'28rpx'}"
			lineHeight="0"
			:itemStyle="{'width':'108rpx','height':'80rpx'}"></u-tabs>
		</view>
		
		
		<!-- 课程列表 -->
		<view class="courses" v-if="coursesList.data[0]!=undefined && hasLogin">
			<view class="clist" v-for="(item,index) in coursesList.data" @click="goPlay(item.id)">
				<view class="videophoto"><image src="https://yulistudio.oss-cn-shenzhen.aliyuncs.com/images/icons/video.png" mode="aspectFit"></image></view>
				<view class="vdesc">
					<text class="mid blod line-clamp-2">{{item.coursename}}</text>
					<text class="mt-1 mb-1"><text class="blod">{{item.courselev}}</text> {{item.totalcourses}}节课 / {{item.coursetime}}分钟</text>
					<text class="small">{{item.weekname}} {{replaceStr(item.classtime)}} </text>
				</view>
				<view class="videoOptions">
					<view><text class="red">￥{{item.courseprice}}</text></view>
					<view class="mt-1"><u-button type="primary" text="试看" size="small" shape="circle"></u-button></view>
				</view>
			</view>
		</view>
		<view class="courses" v-else @click="GoUrl('/pages/login/login')">
			<view style="margin-top:60rpx;"><u-empty mode="permission" text="请登录后访问"></u-empty></view>
		</view>
	</view>
	<view v-else>
		<view style="margin-top:60rpx;"><u-empty mode="data" text="暂无课程"></u-empty></view>
	</view>
</template> 

<script setup lang='ts'>
import { ref,reactive,watchEffect } from 'vue'
import {  onLoad,onShow,onReachBottom } from '@dcloudio/uni-app'
import { bus } from '@/utils/bus'
import { GoUrl } from '@/utils/utils'

import { userStore } from '@/stores/userStore'
let store = userStore();	
let { hasLogin } = userStore();

//是否打开
let isOpen=ref(false);

let isLoaded=ref(false);
let pageNum=ref(1);
let pageSize=ref(20);
let totalData=ref(0);

let backupCoursesList=reactive<any>({data:[]});
let coursesList=reactive<any>({data:[]});
let firstList=reactive<any>({data:[
				{
	                name: '全部',
	            },
				{
                    name: '素描',
                }, {
                    name: '漫画',
                }, {
                    name: '硬笔书法'
                }, 
				{
                    name: '创意美术'
                }, 
				{
				    name: '水彩'
				},
				{
                    name: '户外写生'
                }, {
                    name: '水粉'
                }]});
let queryParams=reactive<any>({
	first:null,
	second:null,
	week:null
});				
const firstClick=(e:any)=>{
	console.log("选择第一级分类",e);
	queryParams.first=e.name; //第一级分类
	if(e.name==='全部'){
		queryParams.first=null; //第二级分类
		coursesList.data=backupCoursesList.data;
	}
	findData();
}		
let secondList=reactive<any>({data:[
				{
	                name: '全部',
	            },	
				{
					name: '基础班',
				}, {
					name: '提升班',
				}, {
					name: '高级班'
				}]});
const secondClick=(e:any)=>{
	console.log("选择第二级分类",e);
	if(e.name==='全部'){
		queryParams.second=null; //第二级分类
	}else{
		queryParams.second=e.name; //第二级分类
	}
	findData();
}	

const findData=()=>{
	console.log("参数",queryParams);
	coursesList.data=backupCoursesList.data;
	let temp=backupCoursesList.data;
	if(queryParams.first===null && queryParams.second!=null && queryParams.week!=null){
		temp=coursesList.data.filter(item=>item.courselev===queryParams.second && item.weekname.indexOf(queryParams.week)!=-1);
	}
	if(queryParams.first!=null && queryParams.second===null && queryParams.week===null){
		temp=coursesList.data.filter(item=>item.firstclass===queryParams.first);
	}
	if(queryParams.first!=null && queryParams.second===null && queryParams.week!=null){
		temp=coursesList.data.filter(item=>item.firstclass===queryParams.first && item.weekname.indexOf(queryParams.week)!=-1);
	}
	if(queryParams.first===null && queryParams.second===null && queryParams.week!=null){
		temp=coursesList.data.filter(item=>item.weekname.indexOf(queryParams.week)!=-1);
	}
	if(queryParams.first!=null && queryParams.second!=null && queryParams.week===null){
		temp=coursesList.data.filter(item=>item.firstclass===queryParams.first && item.courselev===queryParams.second);
	}
	if(queryParams.first!=null && queryParams.second!=null && queryParams.week!=null){
		temp=coursesList.data.filter(item=>item.firstclass===queryParams.first && item.courselev===queryParams.second && item.weekname.indexOf(queryParams.week)!=-1);
	}		
	coursesList.data=temp;		
}

let weekList=reactive<any>({data:[
				{
					name: '全部',
				},
				{
					name: '周日',
				}, {
					name: '周一',
				}, {
					name: '周二'
				},
				{
					name: '周三'
				},
				{
					name: '周四'
				},
				{
					name: '周五'
				},
				{
					name: '周六'
				}
				]});
const weekClick=(e:any)=>{
	if(e.name==='全部'){
		queryParams.week=null; //第二级分类
	}else{
		queryParams.week=e.name; //第二级分类
	}
	findData();	
}	

const replaceStr=(inputWord:string)=>{
	return inputWord.replace("至","--");
}

const goPlay=(vid:number)=>{
	//console.log("视频id"+vid.toString());
	uni.setStorageSync("videoId",vid)
	uni.$tools.GoUrl('/pages/video/video');
}

const getCourses=()=>{
	uni.showLoading({
		title:"加载中..."
	})
	let paraData={}
	console.log("课程参数:",paraData);
	uni.$tools.Reqeust('/api/getCourses?pageNum='+pageNum.value+'&pageSize='+pageSize.value,paraData,'GET').then((res:any)=>{
		console.log('课程返回:==>',res);
		if (res.data.code == 200) {
			uni.hideLoading();
			totalData.value=res.data.total;
			isLoaded.value=true;
			//coursesList.data=res.data.rows;
			res.data.rows.forEach(item=>{
				console.log(item);
				coursesList.data.push(item);
			});
			//备份数据,用于搜索复现
			backupCoursesList.data=coursesList.data;
		}else{
			uni.hideLoading();
		}
	})	
}

//读取开关
const getOpenCourse=()=>{
	let paraData={}
	console.log("读取开关参数:",paraData);
	uni.$tools.Reqeust('/api/getOpenCourse',paraData,'POST').then((res:any)=>{
		console.log('读取开关参数:==>',res);
		if (res.data.code == 200) {
			isOpen.value=res.data.data[0].switchtype===1?true:false;
		}
	})	
}

onLoad(()=>{
	//读取课程信息
	readCourses();
	isLoaded.value=true;
	//解决小程序onShow返回后，无法读取缓存对象问题
	bus.on("hasLoginEvent", (data) => {
	   console.log("登录事件:",data);
	   store.$state.hasLogin=true;
	   uni.setStorageSync("hasLogin",true);
	   readCourses();
	});
});

onShow(()=>{
	getOpenCourse();
	// if(uni.getStorageSync("hasLogin")==="" || uni.getStorageSync("hasLogin")===null){
	// 	console.log("请登录后查看");
	// 	setTimeout(()=>{
	// 		store.$state.backRouter="/pages/courselist/courselist";
	// 		uni.$tools.GoUrl('/pages/login/login');
	// 	},1500);
	// 	return;
	// }
	if(!isLoaded.value) readCourses(); //防止重复读取2次数据
});


const readCourses=()=>{
	console.log("是否已登录",hasLogin);
	if(uni.getStorageSync("hasLogin")!=""){
		hasLogin=true;
		uni.removeStorageSync("hasLogin");
	}
	if(hasLogin){
		getCourses();		
	}else{
		uni.$tools.Toast("请登录后访问");
		setTimeout(()=>{
			store.$state.backRouter="/pages/courselist/courselist";
			uni.$tools.GoUrl('/pages/login/login');
		},1000);
	}	
}

onReachBottom(()=>{
	console.log("到底了...加载数据");
	if(coursesList.data.length<totalData.value){
		pageNum.value++;
		getCourses();
	}else{
		uni.$tools.Toast("已经没有更多课程啦~");
	}
})
	
</script>
<style>
	page{
		background:#F1F1F1;
	}
</style>
<style lang='scss' scoped>
	@import "courselist.scss";
</style>